<template>
  <view class="main">
    <form class="form">
      <view class="form_item mt48">
        <view class="title">违约本金</view>
        <input name="input" type="number" placeholder="0" v-model="oldTax" />
      </view>
      <view class="form_item">
        <view class="title">起算日期</view>
        <picker mode="date" :value="startDate" @change="startDateChange">
          <view class="picker flex_align">
            {{ startDate }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">截止日期</view>
        <picker mode="date" :value="endDate" @change="endDateChange">
          <view class="picker flex_align">
            {{ endDate }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">利率计算方式</view>
        <picker @change="PickerChange" :value="index" :range="picker" range-key="name">
          <view class="picker flex_align">
            {{ index > -1 ? picker[index].name : '请选择' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">约定利率(%)</view>
        <input name="input" type="number" placeholder="0" v-model="appointTax" />
      </view>
    </form>
    <view v-if="resultShow" class="result mt28">
      <view class="tax-title">
        <text>
          计算结果：
        </text>
      </view>
      <view class="tax-text">
        <text>
          逾期期限(天)
        </text>
        <text>
          {{ overdueDays }}
        </text>
      </view>
      <view class="tax-text">
        <text>
          违约金(元)
        </text>
        <text>
          {{ taxCount }}
        </text>
      </view>
      <view class="tax-title mt48">
        <text>
          计算公式：
        </text>
      </view>
      <view class="overdue-text mt28">
        <text>违约金=违约本金 x 逾期期限 x 利率</text>
        <text>利率换算：年利率= 12 x 月利率 = 360 x 日利率</text>
      </view>
    </view>
    <view class="footer">
      <view class="bottom-btn">
        <view class="reset-btn" @click="resetBtn">
          重 置
        </view>
        <view class="count-btn" @click="countBtn">
          计 算
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/wyj/index"></script>

<style lang="scss" scoped>
.main {
  height: 100%;
  overflow-y: auto;

  .result {
    padding: 0 30rpx;

    .tax-title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333;
    }

    .tax-text {
      margin-top: 30rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .overdue-text {
      display: flex;
      flex-direction: column;
      line-height: 56rpx;
      font-size: 32rpx;
    }

  }

  .form {
    .form_item {
      background-color: #ffffff;
      padding: 2rpx 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 96rpx;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 160rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .bottom-btn {
      padding: 0 30rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .reset-btn {
        width: 220rpx;
        height: 90rpx;
        background-color: #f6f6f6;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
      }

      .count-btn {
        width: 440rpx;
        height: 90rpx;
        background-color: #2979ff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}
</style>

